<template>
  <el-container>
    <el-main :class="login">
      <el-row
        type="flex"
        style="height: 100%"
        justify="center"
        align="middle"
        class="cansBox"
      >
        <el-col :span="6" shadow="always">
          <el-card class="loginBox">
            <!-- 登录表单 -->
            <el-form
              :model="ruleFormLogin"
              status-icon
              :rules="rulesLogin"
              ref="ruleFormLogin"
              label-width="100px"
              class="demo-ruleForm"
              v-show="isLogin"
            >
              <h1 class="loginTitle">登录</h1>
              <el-form-item prop="username" label-width="0">
                <el-input
                  type="text"
                  v-model="ruleFormLogin.username"
                  autocomplete="off"
                  placeholder="账号"
                  class="inputBox"
                  maxlength="16"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label-width="0">
                <el-input
                  :type="pwType"
                  v-model="ruleFormLogin.password"
                  autocomplete="off"
                  placeholder="密码"
                  class="inputBox"
                  ><i slot="suffix" class="el-icon-view" @click="showPass"></i
                ></el-input>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button
                  :type="btnColor"
                  @click="submitForm('ruleFormLogin')"
                  style="width: 100% !important"
                  >登录</el-button
                >
              </el-form-item>
              <el-form-item label-width="85%">
                <el-link type="primary" :underline="false" @click="registFirst"
                  >立即注册</el-link
                >
              </el-form-item>
            </el-form>
            <!-- 注册表单 -->
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              v-show="!isLogin"
            >
              <h1 class="loginTitle">注册</h1>
              <el-form-item prop="username" label="用户名：">
                <el-input
                  type="text"
                  v-model="ruleForm.username"
                  autocomplete="off"
                  placeholder="用户名(6-16位数字、下划线或字母)"
                  maxlength="16"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码：" prop="confirmPassword">
                <el-input
                  type="password"
                  v-model="ruleForm.confirmPassword"
                  autocomplete="off"
                  placeholder="确认密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="真实姓名：">
                <el-input
                  type="text"
                  v-model="ruleForm.name"
                  autocomplete="off"
                  placeholder="真实姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="籍贯：">
                <el-input
                  type="text"
                  v-model="ruleForm.nativePlace"
                  autocomplete="off"
                  placeholder="籍贯"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone" label="电话：">
                <el-input
                  type="text"
                  v-model="ruleForm.phone"
                  autocomplete="off"
                  placeholder="电话"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <el-form-item prop="identityCard" label="身份证号：">
                <el-input
                  type="text"
                  v-model="ruleForm.identityCard"
                  autocomplete="off"
                  placeholder="身份证号码"
                  maxlength="18"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：">
                <el-radio-group v-model="ruleForm.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="角色：">
                <el-radio-group v-model="ruleForm.role">
                  <el-radio label="房东"></el-radio>
                  <el-radio label="租客"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button
                  :type="btnColor"
                  @click="registBtn('ruleForm')"
                  style="width: 100% !important"
                  >立即注册</el-button
                >
              </el-form-item>
              <el-form-item label-width="70%">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="isLogin = true"
                  >已有账号?开始登录</el-link
                >
              </el-form-item>
            </el-form>
          </el-card>
          <div class="blueBall" v-if="!show"></div>
          <div class="blueBall2" v-if="!show"></div>
        </el-col>
      </el-row>
      <canvas id="cans" @mousemove="moveE($event)"></canvas>
      <el-collapse-transition>
        <div
          class="beam"
          v-if="show"
          v-bind:style="{
            transform:
              'translateY(-50%) rotate(var(--beam-deg,' +
              rotateZ +
              'deg' +
              '))',
          }"
        ></div>
      </el-collapse-transition>
      <img
        src="./../../../public/img/princess.png"
        alt=""
        id="princess"
        v-if="show"
      />
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.confirmPassword !== "") {
          this.$refs.ruleForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      isLogin: true,
      rotateZ: 0,
      show: false,
      login: "login1",
      btnColor: "primary",
      pwType: "password",
      ruleFormLogin: {
        username: "",
        password: "",
      },
      ruleForm: {
        username: "",
        password: "",
        confirmPassword: "",
        name: "",
        nativePlace: "",
        phone: "",
        identityCard: "",
        sex: "男",
        role: "租客",
      },
      rulesLogin: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rulesRegist2: {},
      rules: {
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入注册账号", trigger: "blur" },
          { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        identityCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          { min: 18, max: 18, message: "长度在18个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/user/login",
            method: "post",
            data: this.ruleFormLogin,
          }).then((res) => {
            // console.log(res);
            let router = this.$router;
            if (res.code === 0) {
              sessionStorage.setItem("token", JSON.stringify(res.data));
              this.$message.success("登陆成功");
              sessionStorage.setItem("username", JSON.stringify(this.ruleFormLogin.username));
              setTimeout(function () {
                router.push("/main");
              }, 1000);
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("账号或密码不能为空！");
          return false;
        }
      });
    },
    registBtn(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/user/register",
            method: "post",
            data: this.ruleForm,
          }).then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$message.success("注册成功");
              this.isLogin = true;
              this.ruleFormLogin.username = this.ruleForm.username;
              this.ruleFormLogin.password = this.ruleForm.password;
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("信息输入有误！");
          return false;
        }
      });
    },
    showPass() {
      if (this.pwType === "password") {
        this.pwType = "text";
        this.login = "login2";
        this.btnColor = "";
        this.show = true;
      } else {
        this.pwType = "password";
        this.login = "login1";
        this.btnColor = "primary";
        this.show = false;
      }
    },
    moveE(event) {
      this.rotateZ =
        (event.screenY - 100 - event.target.clientHeight / 2) / -100;
    },
    registFirst() {
      this.isLogin = false;
      this.show = false;
      this.login = "login1";
      this.pwType = "password";
      this.btnColor = "primary";
    },
  },
  // mounted() {
  //   console.log("1111");
  //   var canvas = document.getElementById("cans");
  //   var ctx = canvas.getContext("2d");
  //   ctx.beginPath();
  //   ctx.moveTo(100, 100);
  //   ctx.lineTo(200, 100);
  //   ctx.closePath();
  //   ctx.stroke();
  //   console.log(ctx);
  //   var img = new Image(); // 创建一个<img>元素
  //   img.src = require("./../../public/img/yinhuochong.jpg");
  //   ctx.drawImage(img,200,200);
  // },
};
</script>

<style lang="less" scoped>
.cansBox {
  position: relative;
}
.beam {
  width: 100vw;
  height: 25vw;
  position: absolute;
  // background-color: red;
  background: linear-gradient(0deg, white, rgb(247, 247, 93), red);
  z-index: 1;
  top: 48%;
  right: 41%;
  clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  transform: translateY(-50%) rotate(var(--beam-deg, 0));
  transform-origin: 100% 50%;
  transition: all 0.2s ease-out;
}
#cans {
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
}
.blueBall {
  width: 30vh;
  height: 30vh;
  background-color: #40a0ffb1;
  border-radius: 50%;
  z-index: 20;
  position: absolute;
  left: -15vh;
  top: 6vh;
}
.blueBall2 {
  width: 70vh;
  height: 70vh;
  background-color: #5baaf9b1;
  border-radius: 50%;
  z-index: 20;
  position: absolute;
  right: -35vh;
  bottom: -35vh;
}
.login1 {
  height: 100vh;
  background-color: white;
  overflow: hidden;
  .loginTitle {
    font-size: 40px;
    color: black;
    text-align: center;
  }
  .loginBox {
    background-color: white;
    transition: all 0s;
    position: relative;
    z-index: 5;
  }
  .el-card {
    border: 1px solid white;
  }
  .el-form-item {
    position: relative;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0);
  }
  .el-input,
  /deep/.el-input__inner {
    background-color: rgba(255, 0, 0, 0);
  }
  #princess {
    position: absolute;
    top: 42%;
    left: 0%;
  }
}
.el-icon-view {
  font-size: 20px;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.login2 {
  height: 100vh;
  background-color: black;
  overflow: hidden;
  .loginTitle {
    text-align: center;
    font-size: 40px;
    color: white;
  }
  .loginBox {
    background-color: rgba(0, 0, 0, 0);
    transition: all 0s;
    position: relative;
    z-index: 5;
  }
  .el-card {
    border: none;
  }
  .el-form-item {
    position: relative;
    z-index: 10;
  }
  .el-form {
    position: relative;
    z-index: 10;
  }
  .el-input,
  /deep/.el-input__inner {
    background-color: rgba(255, 0, 0, 0);
  }
  #princess {
    position: absolute;
    top: 42%;
    left: 0%;
    z-index: 10;
  }
}
</style>